<template>
  <div class='changeUserinfo'>
    <at-dialog title='修改信息' :visible.sync="control" :before-close="close" :close-on-press-escape="false">
      <at-form :model="formInfo" :rules="changeUsersRules" ref="changeUsersRef" label-width="130px">
        <at-form-item label="姓名" prop="personName">
          <at-input v-model="formInfo.personName"></at-input>
        </at-form-item>
        <at-form-item label="角色" v-if="showState" prop="roleName">
          <at-select v-model="formInfo.roleName" placeholder="请选择">
            <at-option v-for="item in roleList" :key="item.roleList" :label="item.num" :value="item.num">
            </at-option>
          </at-select>
        </at-form-item>
        <at-form-item label="部门" prop="department">
          <at-select v-model="formInfo.department" placeholder="请选择" filterable>
            <at-option v-for="item in departmentList" :key="item.anode_id" :label="item.anode_name" :value="item.anode_id">
            </at-option>
          </at-select>
        </at-form-item>
        <at-form-item label="性别">
          <at-select v-model="formInfo.sex" placeholder="请选择">
            <at-option label="男" value="男"></at-option>
            <at-option label="女" value="女"></at-option>
          </at-select>
        </at-form-item>
        <at-form-item label="生日">
          <at-date-picker v-model="formInfo.birthday" type="date" placeholder="选择日期" format="yyyy-MM-dd" :picker-options="pickerOptions" :editable="false"></at-date-picker>
        </at-form-item>
        <at-form-item label="邮箱地址" prop="email">
          <at-input v-model="formInfo.email"></at-input>
        </at-form-item>
        <at-form-item label="手机号码" prop="mobilePhone">
          <at-input v-model="formInfo.mobilePhone"></at-input>
        </at-form-item>
        <at-form-item label="备注">
          <at-input v-model="formInfo.remark"></at-input>
        </at-form-item>
        <at-form-item style="margin-left:78px;">
          <at-button type="primary" @click="submitChangePerson">立即修改</at-button>
        </at-form-item>
      </at-form>
    </at-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: ['showState'],
  data () {
    return {
      // control:false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now() + 3600 * 24 * 1000 - 8.64e7
        }
      },
      changeUsersRules: {
        personName: [
          { required: true, message: '姓名为必填,请输入用户姓名', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          // {pattern: /^[a-zA-Z0-9_]+$/,message: '由字母数字下划线组成', trigger: 'blur'}
        ],
        roleName: [
          { required: true, message: '角色为必选,请选择用户角色', trigger: 'change' }
        ],
        department: [
          { required: true, message: '部门为必选,请选择用户所属部门', trigger: 'change', type: 'number' }
        ],
        email: [
          { type: 'email', message: '请输入正确格式邮箱', trigger: 'blur' }
        ],
        mobilePhone: [
          { pattern: /^1[34578][0-9]{9}$/, message: '请输入正确格式手机号码', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getDepartment()
  },
  computed: {
    ...mapState({
      departmentList: state => state.register.departmentList,
      roleList: state => state.register.roleList,
      // control:state =>state.system.showModelChangeInfo,
      formInfo: state => state.register.changeFormInfo
    }),
    control: {
      get () {
        return this.$store.state.system.showModelChangeInfo
      },
      set (value) {
        this.$store.commit('system/settersLogin', {
          'key': 'showModelChangeInfo',
          'value': value
        })
      }
    }
  },
  methods: {
    getDepartment () {
      this.$store.dispatch('users/getDepartments')
    },
    submitChangePerson () {
      this.$refs['changeUsersRef'].validate((valid) => {
        if (valid) {
          let timeAns
          if (this.formInfo.birthday === '') {
            timeAns = ''
          } else {
            let time = new Date(Date.parse(this.formInfo.birthday))
            timeAns = this.formInfo.birthday === undefined ? '' : time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate()
          }
          let data = {
            'key': this.formInfo.key,
            'bperson_name': this.formInfo.personName,
            'auser_name': this.formInfo.userName,
            'drole_name': this.formInfo.roleName,
            'fdepartment_name': this.formInfo.department,
            'bemail': this.formInfo.email,
            'bmobile_phone': this.formInfo.mobilePhone,
            'bremark': this.formInfo.remark,
            'bbirthday': timeAns,
            'bsex': this.formInfo.sex
          }
          this.$store.dispatch('register/register', data)
        } else {
          return false
        }
      })
    },
    close () {
      this.$store.commit('system/settersRoot', {
        key: 'showModelChangeInfo',
        value: false
      })
    }
  }
}
</script>
